<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS特性</title>
  <style>
    html {
      font-size: 24px;
    }

    li:hover {
      color: #f0f;
    }

    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <h3>CSS特性</h3>
  <ol>
    <li>继承性</li>
    <li>层叠性</li>
    <li>优先级</li>
  </ol>
  <table border="1">
    <tr>
      <th>等级</th>
      <th>选择器</th>
    </tr>
    <tr>
      <td>1</td>
      <td>通配符选择器</td>
    </tr>
    <tr>
      <td>2</td>
      <td>标签选择器</td>
    </tr>
    <tr>
      <td>3</td>
      <td>类选择器</td>
    </tr>
    <tr>
      <td>4</td>
      <td>类选择器</td>
    </tr>
    <tr>
      <td>6</td>
      <td>id选择器</td>
    </tr>
    <tr>
      <td>7</td>
      <td>行内样式</td>
    </tr>
    <tr>
      <td>8</td>
      <td>!important</td>
    </tr>
  </table>
  <h3>权重计算</h3>
  <p>(行内样式,id选择器个数,类选择器个数,标签选择器个数)</p>
  <p>!important 权重最高 ; 继承性 权重最低</p>
</body>

</html>